<script setup>
import Tapbar from "../../components/tapbar.vue";
import { ref, onMounted, nextTick,watch } from 'vue';
import { onReady,onPullDownRefresh, onLoad } from "@dcloudio/uni-app";

const indexs = ref(1)
const right = ref()
const rightHeight = ref(0)
let heightList = ref([]);

function onNav(e){
  const i = e.currentTarget.dataset.index;
  indexs.value = i
  if(i === 0){
    rightHeight.value = 0;
  } else {
    rightHeight.value = heightList.value[i-1];
  }

  console.log(rightHeight.value,e);
}
onLoad(()=>{
  uni.showToast({
    icon:'loading'
  })
})

onReady(()=>{
  for (let i = 0; i < 4; i++) {
    uni.createSelectorQuery().select(`#refHeight${i}`).boundingClientRect().exec((res) => {
      if(i>0) {
        heightList.value.push(res[0].height+heightList.value[i-1])
      } else {
        heightList.value.push(res[0].height)
      }
      console.log(heightList.value);
    })
  }
  uni.hideToast();
  // heightList.value = heightList.value.reduce((value,item,index)=>{
  //   if(index === 0){
  //     value.push(0)
  //     return value
  //   } else {
  //     return value.push(heightList.value[index-1])
  //   }
  // },[])
})

onMounted(() => {

})
//

</script>

<template>
  <view><Tapbar :value1="1"></Tapbar></view>
  <view>
    <!--   搜索-->
    <view class="search-input">
      <view class="input-box">
        <up-input
            border="none"
            placeholder="输入搜索关键词"
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #909399;width: 627rpx;
            border:1px red solid;
            height: 66rpx;background:#fff;border-radius:20rpx"
        ></up-input>
      </view>
      <view class="title">
        <image src="/src/assets/扫一扫.png"></image>
        <view class="saoTitle">扫一扫</view>
      </view>
    </view>
  </view>
<!--  分类内容-->
  <view>
    <view class="content">
      <view class="left">
        <view class="left-min" v-for="(item,index) in 4" :data-index="index" @click="onNav" :key="index">
          <view class="left-title"  :style="indexs === index?'background:red;':'background:#fff;color:black'">峰团生鲜</view>
        </view>
      </view>
      <scroll-view scroll-y="true" :scroll-top="rightHeight" class="right right-class" ref="right" id="right">
        <view class="right-min" :id="`refHeight${index}`" v-for="(item, index) in 4" :key="index">
          <view class="right-title">峰团生鲜</view>
          <view class="right-min-content">
            <view class="shop-min" v-for="item in 10" :key="item">
              <image class="image" src="/src/assets/shop2.png"></image>
              <view class="shop-title">菠萝</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.search-input{
  border-radius:20rpx !important;
  width:100%;
  box-sizing: border-box;
  padding-left:32rpx;
  height:66rpx;
  display:flex;
  margin-top:66rpx;
  .input-box{
    width:627rpx;
    height:66rpx;
  }
  .title{
    height:66rpx;
    text-align:center;
  }
  image{
    width:34rpx;
    height:30rpx;
  }
  .saoTitle{
    font-size:6rpx;
  }
}

// 内容
.content{
  width:750rpx;
  height:100vh;
  margin-top:31rpx;
  border-top:1px rgba(0, 0, 0, 0.2) solid;
  display:flex;
  .left{
    width:191rpx;
    height: 100%;
    border-right:1px rgba(0, 0, 0, 0.2) solid;
    .left-title{
      width:139rpx;
      height:50rpx;
      font-size:24rpx;
      line-height:50rpx;
      text-align:center;
      background:red;
      border-radius:25rpx;
      color:#fff;
      margin-left:30rpx;
      margin-top:25rpx;
    }
  }
  .right{
    flex:1;
    //overflow:scroll;
    .right-min{
      width:100%;
      .right-title{
        height:85rpx;
        margin-left:40rpx;
        margin-top:35rpx;
      }
      .right-min-content{
        width:100%;
        display:flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        padding-left:20rpx;
        .shop-min{
          width:136rpx;
          margin-right:40rpx;
          text-align: center;
          margin-bottom:41rpx;
          .image{
            width:136rpx;
            height:136rpx;
          }
        .shop-title{
          font-size:23rpx;
          margin-top:22rpx;
          color: rgba(0, 0, 0, 0.48);
        }
        }
      }
    }
  }
}
</style>
